<template>
	<view>
		<view class="addbox1_son2">
			<view class="pic-box">
				<view class="pic-box-son" v-for="(picitem,picindex) in picArr" :key="picindex">
					<!-- 删除按钮 -->
					<view class="delbtn" @tap="delpic(picindex)"></view>
					<image :src="picitem"></image>
				</view>
				<view v-show="picArr.length<1" class="pic-box-son" @tap="sendImg">
					<view>点击<br>上传图片</view>
					<view>（最多1张）</view>
				</view>
			</view>
		</view>
		<view class="userinfo">
			<view class="info_nickname">
				<view class="nickname_left"> 菜品名称: </view>
				<view class="nickname_right">
					<input v-model="dishName" placeholder="请输入菜品名称" />
				</view>
			</view>

			<view class="info_nickname">
				<view class="nickname_left"> 菜品描述: </view>
				<view class="nickname_right">
					<input v-model="dishDescription" placeholder="请输入菜品描述" />
				</view>
			</view>

			<view class="info_nickname">
				<view class="nickname_left"> 菜品价格: </view>
				<view class="nickname_right">
					<input v-model="dishPrice" placeholder="请输入菜品价格" />
				</view>
			</view>

			<view class="info_nickname">
				<view class="nickname_left"> 菜品口味: </view>
				<view class="nickname_right">
					<input v-model="dishFlavor" placeholder="请输入菜品口味" />
				</view>
			</view>

			<view class="btn-wrap">
				<button type="success" class="btn" @click="addDish">添加菜品</button>
			</view>
			<view style="padding-top: 150rpx;">
				<u-button text="提交审核" type="success" @click="handle"></u-button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				picArr: [],
				dishName: '',
				dishDescription: "",
				dishPrice: 0,
				dishFlavor: '',
				shopAddress: '',
				shopDescription: '',
				shopName: '',
				shopId: '',
				id: '',
				userAccount: '',
				userRole: '',
				imgUrl: '',
				userId: '',
				email: '',
				stuNum: '',
				avatar: '',
				nickname: '',
				username: '',
				avatar: '',
				name: '',
				examinationTypeArray: ['男', '女'],
				examinationTypeIndex: 0,
				examinationTypeArrayType: '',
				phone: '',
				number: 2,
				flag: false,
				shopinfo: [],
			}
		},
		onLoad(query) {
			this.userId = uni.getStorageSync("userId")
			this.shopId = query.shopId;
			this.getShopinfo();
		},
		methods: {
			handle() {
				let that = this;
				let data = {
					shopId: that.shopId,
					status: '合规审核中'
				}
				that.$ajax(that.$url.updateShopStatus, "POST", data, function(resp) {
					uni.navigateBack()
				})
			},
			addDish() {
				let that = this;
				let data = {
					dishName: that.dishName,
					dishDescription: that.dishDescription,
					dishPrice: that.dishPrice,
					dishFlavor: that.dishFlavor,
					picture: 'http://s1qq2mel1.hn-bkt.clouddn.com/' + that.imgUrl,
					shopId: that.shopId,
				}
				that.$ajax(that.$url.addDish, "POST", data, function(resp) {
					uni.showToast({
						icon: 'none',
						title: '提交审核成功'
					})
				})
			},
			getShopinfo() {
				let that = this;
				this.url = uni.getStorageSync('url');
				let collect = uni.getStorageSync('collect');
				this.collectNum = collect.length;
				let data = {
					shopId: that.shopId
				}
				this.$ajax(this.$url.searchShopById, 'POST', data, function(resp) {
					that.shopinfo = resp.data.result
				})
			},
			// 绑定输入监听事件
			onName(event) {
				const {
					detail
				} = event
				this.username = detail.value
			},
			change(e) {
				console.log('e:', e)
			},
			examinationType(e) {
				this.examinationTypeIndex = e.target.value
				this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
			},
			changenumber() {
				this.number = 1
				this.flag = true
			},
			onPhone(event) {
				const {
					detail
				} = event
				this.phone = detail.value
			},
			// 上传图片
			sendImg: function() {
				let that = this;
				let num = 1 - this.picArr.length;
				let count = num; // 自定义一次性最多可选几张
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const filePaths = res.tempFilePaths;
						let selected = this.picArr
						for (let i = 0; i < filePaths.length; i++) {
							that.picArr[i] = "http://s1qq2mel1.hn-bkt.clouddn.com/images/" + that.userId +
								"/dish/" + Date.now();
							that.$ajax(that.$url.upLoad, "GET", null, function(resp) {
								let token = resp.data.result;
								let now = new Date();
								console.log("filePaths", Date.now())
								that.imgUrl = 'images/' + that.userId + "/dish/" +
									Date.now(); // 图片链接，其中的 / 会自动生成一个名为images的文件夹， // 则是两个
								let self = this
								wx.uploadFile({
									filePath: filePaths[i], // ctx.takePhoto拍照获取的图片链接
									url: "https://upload-z2.qiniup.com", // 七牛云地址
									name: "file",
									formData: {
										token,
										key: that.imgUrl,
										insertOnly: 0,
									},
									success: (a) => {
										console.log(a)
										console.log("上传成功！")
										let res = a.data
										res = JSON.parse(res)
										if (res.code == '1') {
											const {
												data
											} = res
											self.avatar = data.url
											self.cdnUrl = getApp().globalData.cdnUrl +
												data.url
										}

										wx.hideLoading()
										wx.showToast({
											title: '上传成功',
											icon: 'success',
											duration: 3000
										})
									},
									fail: (res) => {
										console.log(res)
										return 0;
									},
								})

							})

							this.picArr.unshift(filePaths[i])
						}
					}
				});
			},
			// 删除当前图片
			delpic: function(index) {
				// console.log(index)
				this.picArr.splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.addbox1_son2 {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: row; */
		/* align-items: center; */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, .1);
	}

	.pic-box {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* justify-content: center; */
	}

	.pic-box-son {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		width: 152rpx;
		height: 152rpx;
		padding: 4rpx;
		border-radius: 6rpx;
		border: 2rpx dashed rgba(0, 0, 0, .2);
	}

	.pic-box-son image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.pic-box-son>view:first-child {
		font-size: 28rpx;
		color: #565656;
		text-align: center;
	}

	.pic-box-son>view:last-child {
		font-size: 24rpx;
		color: #a7a7a7;
		text-align: center;
	}

	.delbtn {
		width: 100%;
		position: relative;
		text-align: center;
		line-height: 32rpx;
		font-size: 46rpx;
	}

	.delbtn::before {
		position: absolute;
		content: '-';
		background-color: #ff9000;
		color: #fff;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50rpx;
		top: 6rpx;
		right: 6rpx;
		z-index: 99;
	}

	.other {
		margin: 10rpx;
		height: 190rpx;
		// width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}

	button::after {
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	.userinfo {
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		height: 100%;
		position: relative;

		.form {
			background-color: #ffffff;
		}

		.avatar-wrap {
			border: 0;
			background-color: #ffffff;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;

			.avatar {
				margin-right: 10rpx;
			}

			.ipt {
				display: flex;
				align-items: center;
			}

			img {
				width: 118rpx;
				height: 118rpx;
			}
		}

		.info_nickname {
			border-bottom: 1px solid #e9e9e9;
			height: 112rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			// justify-content: space-between;

			.nickname_left {}

			.nickname_right {
				input {
					text-align: right;
				}
			}

			.gender {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.btn-wrap {
			position: absolute;
			// bottom: 50rpx;
			width: 100%;
			text-align: center;

			.btn {
				width: 690rpx;
				height: 88rpx;
			}
		}
	}
</style>